import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Modal, Button } from "antd";
import { useState, forwardRef, useImperativeHandle } from "react";

interface Props {
  delText: string;
  onDelTask: Function;
}
const Remove = (props: Props, ref: any) => {
  const [isDel, setDel] = useState(false);

  const onDelete = () => {
    setDel(true);
  };
  const handleOk = () => {
    setDel(false);
    props.onDelTask();
  };

  const handleCancel = () => {
    setDel(false);
  };

  useImperativeHandle(ref, () => ({
    onDelete,
  }));
  return (
    <div>
      <Modal
        open={isDel}
        closable={false}
        onOk={handleOk}
        onCancel={handleCancel}
        width={400}
        centered
        bodyStyle={{ padding: "16px" }}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleOk}>
            确定
          </Button>,
        ]}
      >
        <p className="text-18px font-700 color-#363F4D">
          <ExclamationCircleOutlined className="color-red! mr-10px!" />
          删除
        </p>
        <p>{props.delText}</p>
      </Modal>
    </div>
  );
};

export default forwardRef(Remove);
